<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <div class="dashboard-text">欢迎您: <el-link type="primary" class="login-info">{{ name }}</el-link>，当前在线人数：<el-link type="success" class="login-info">83958</el-link> 人</div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="block">
          <el-timeline :reverse="reverse">
            <el-timeline-item v-for=" (activitie, index) in activities" :key="index" :timestamp="activitie.timestamp" placement="top">
              <el-card>
                <h4>{{ activitie.content }}</h4>
                <p>{{ activitie.timestamp }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      reverse: true,
      activities: [{
        content: '系统初始化',
        timestamp: '作者：YWF 发布于 2018-04-15'
      }, {
        content: '系统基本框架搭建完成',
        timestamp: '作者：YWF 发布于 2018-05-13'
      }, {
        content: '系统开始策划前端功能',
        timestamp: '作者：YWF 发布于 2018-06-13'
      }, {
        content: '系统开始搭建后端接口',
        timestamp: '作者：YWF 发布于 2019-04-13'
      }, {
        content: '系统进入测试阶段',
        timestamp: '作者：YWF 发布于 2019-05-13'
      }, {
        content: '系统发布1.0版本',
        timestamp: '作者：YWF 发布于 2019-06-13'
      }, {
        content: '系统发布2.0版本',
        timestamp: '作者：YWF 发布于 2022-04-11'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.box-card {
  margin-bottom: 10px;
}
.login-info {
  font-size: 30px;
  font-weight: bold;
}
</style>
